<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table id="myTable">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<!-- 添加分页按钮 -->
<div class="pagination"></div>

<script>
    // 模拟数据源（可根据需求自行修改）
    var data = [
        {id: 1, name: '张三', age: 21},
        {id: 2, name: '李四', age: 22},
        {id: 3, name: '李四', age: 23},
        {id: 4, name: '李四', age: 24},
        {id: 5, name: '李四', age: 25},
        {id: 6, name: '李四', age: 26},
        {id: 7, name: '李四', age: 27},
        {id: 8, name: '李四', age: 28},
        {id: 9, name: '李四', age: 29},
        {id: 10, name: '李四', age: 30},
        {id: 11, name: '李四', age: 31},
        {id: 12, name: '李四', age: 32},
        {id: 13, name: '李四', age: 33},
        // ...更多数据...
    ];

    function createPagination(totalPages) {
        var paginationDiv = document.querySelector('.pagination');

        for (let i = 1; i <= totalPages; i++) {
            let pageButton = document.createElement('button');

            // if (i === currentPage) {
            //     pageButton.classList.add('active');
            // } else {
            //     pageButton.addEventListener('click', function() {
            //         console.log("show page:"+i);
            //         showDataForPage(i);
            //     });
            // }
            pageButton.addEventListener('click', function() {
                currentPage =i;
                console.log("show page:"+i);
                pageButton.classList.remove('active');
                showDataForPage(i);

            });

            pageButton.textContent = i;
            paginationDiv.appendChild(pageButton);
        }
    }

    function showDataForPage(pageNumber) {
        const itemsPerPage = 5; //每页显示的条目数量
        const startIndex = (pageNumber - 1) * itemsPerPage;
        const endIndex = Math.min(startIndex + itemsPerPage, data.length);

        clearTable();

        for (let i = startIndex; i < endIndex; i++) {
            addRowToTable(data[i]);
        }
    }

    function addRowToTable(item) {
        const tableBody = document.querySelector('#myTable tbody');
        const tr = document.createElement('tr');

        Object.values(item).forEach((value) => {
            const td = document.createElement('td');
            td.textContent = value;
            tr.appendChild(td);
        });

        tableBody.appendChild(tr);
    }

    function clearTable() {
        const tableBody = document.querySelector('#myTable tbody');
        while (tableBody.firstChild) {
            tableBody.removeChild(tableBody.firstChild);
        }
    }

    let currentPage = 1;
    const totalItems = data.length;
    const itemsPerPage = 10; //每页显示的条目数量
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    showDataForPage(currentPage || 1);
    createPagination(totalPages);
</script>
</body>
</html>
